<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<!--根据设置确定视口宽度，device-width表示采用设备宽度，初始缩放1.0，使用user-scalable=no可以禁用其缩放（zooming）功能-->
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>移动1701</title>
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" href="index.css" />
	</head>

	<body>
		<!-- 1、头部-->
		<div id="header">
			<!--响应式导航栏-->
			<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
				<div class="container-fluid">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
            <span class="sr-only">切换导航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
						<a class="navbar-brand" href="#">移动1701</a>
					</div>
					<div class="collapse navbar-collapse" id="example-navbar-collapse">
						<ul class="nav navbar-nav">
							<li class="menu active">
								<a href="#">我们的成绩</a>
								<ul class="wrap">
									<li>
										<a href="#">竞赛奖项</a>
									</li>
									<li>
										<a href="#">等级证书</a>
									</li>
									<li>
										<a href="#">活动名次</a>
									</li>
								</ul>
							</li>
							<li class="menu">
								<a href="#">我们的成员</a>
								<ul class="wrap">
									<li>
										<a href="#">竞赛奖项</a>
									</li>
									<li>
										<a href="#">等级证书</a>
									</li>
									<li>
										<a href="#">活动名次</a>
									</li>
								</ul>

							</li>
							<li class="menu">
								<a href="#">我们的活动</a>
								<ul class="wrap">
									<li>
										<a href="#">竞赛奖项</a>
									</li>
									<li>
										<a href="#">等级证书</a>
									</li>
									<li>
										<a href="#">活动名次</a>
									</li>
								</ul>

							</li>
							<li class="menu">
								<a href="#">我们的课程</a>
								<ul class="wrap">
									<li>
										<a href="#">竞赛奖项</a>
									</li>
									<li>
										<a href="#">等级证书</a>
									</li>
									<li>
										<a href="#">活动名次</a>
									</li>
								</ul>

							</li>
						</ul>
					</div>
				</div>
			</nav>
		</div>

		<!--2、轮播图-->
		<div id="lunbo">
			<div id="myCarousel" class="carousel slide">
				<!-- 轮播（Carousel）指标 -->
				<ol class="carousel-indicators">
					<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
					<li data-target="#myCarousel" data-slide-to="1"></li>
					<li data-target="#myCarousel" data-slide-to="2"></li>
				</ol>
				<!-- 轮播（Carousel）项目 -->
				<div class="carousel-inner">
					<div class="item active">
						<img src="img/lb1.jpg" alt="First slide">
					</div>
					<div class="item">
						<img src="img/lb2.jpg" alt="Second slide">
					</div>
					<div class="item">
						<img src="img/lb3.jpg" alt="Third slide">
					</div>
				</div>
				<!-- 轮播（Carousel）导航 -->
				<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
					<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
					<span class="sr-only">Previous</span>
				</a>
				<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
					<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
					<span class="sr-only">Next</span>
				</a>
			</div>
		</div>

		<!--3、我们的成绩-->
		<div class="myrow our-grade">
			<div class="container">
				<!--头部行：只显示一列-->
				<div class="row">
					<!--列-->
					<div class="col-sm-12 main-title">
						<h2 class="h2">我们的成绩</h2>
						<p class="line"></p>
						<h2>
							<small>2017年9至2020年6月，我们的成绩数据</small>
						</h2>
					</div>
				</div>
				<!--行：显示3列-->
				<div class="row">
					<div class="col-sm-4 data-item">
						<div>9</div>
						<h4 class="title">竞赛获奖人次</h4>
					</div>
					<div class="col-sm-4 data-item">
						<div>40</div>
						<h4 class="title">等级考证书人次</h4>
					</div>
					<div class="col-sm-4 data-item">
						<div>10</div>
						<h4 class="title">活动获奖次数</h4>
					</div>
				</div>
			</div>
		</div>
		
			
		<!--4、我们的成员-->
		<div class="myrow our-member">
			<div class="container">
				<!--头部行：只显示一列-->
				<div class="row">
					<!--列-->
					<div class="col-sm-12 main-title">
						<h2 class="h2">我们的成员</h2>
						<p class="line"></p>
						<h2>
							<small>移动1701大家庭，37+1位成员</small>
						</h2>
					</div>
				</div>
				<!--行：显示3列-->
				<div class="row">
					<div class="col-sm-4 data-item">
						<div><img src="img/pic/6.jpg"></div>
						<p>我爱生活我爱摄影我爱世界</p>
						<h4 class="title">班长：夏阳，台州</h4>
					</div>
					<div class="col-sm-4 data-item">
						<div><img src="img/pic/3.jpg"></div>
						<p>我爱生活我爱摄影我爱世界</p>
						<h4 class="title">团支书：杨翌，丽水</h4>
					</div>
					<div class="col-sm-4 data-item">
						<div><img src="img/pic/2.jpg"></div>
						<p>我爱生活我爱摄影我爱世界</p>
						<h4 class="title">纪律委员：郑良靖，温州</h4>
					</div>
				</div>
			</div>
		</div>
		

		<!--先引用jquery，再引用bootstrap最后引用自己的-->
		<script src="bootstrap/js/jquery.min.js"></script>
		<script src="bootstrap/js/bootstrap.min.js"></script>
		<script src="index.js"></script>
	</body>

</html>